<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('登录')"/>
    <link rel="stylesheet" th:href="@{/admin/css/other/login.css}"/>
</head>
<!-- 代 码 结 构 -->
<body background="admin/images/login.svg">
<form action="javascript:void(0);" class="layui-form">
    <div class="layui-form-item">
        <img class="logo" src="admin/images/logo.png"/>
        <div class="title">Pear Admin</div>
        <div class="desc">
            明 湖 区 最 具 影 响 力 的 设 计 规 范 之 一
        </div>
    </div>
    <div class="layui-form-item">
        <input class="layui-input" hover name="username" placeholder="账 户 : admin " type="text" value="admin"/>
    </div>
    <div class="layui-form-item">
        <input class="layui-input" hover name="password" placeholder="密 码 : admin " type="password" value="admin"/>
    </div>
    <div class="layui-form-item">
        <input class="code layui-input layui-input-inline" hover name="captcha" placeholder="验证码 : "/>
        <img class="codeImage" id="captchaImage" src="/system/captcha/generate"/>
    </div>
    <div class="layui-form-item">
        <input lay-skin="primary" name="remember-me" title="记住密码" type="checkbox">
    </div>
    <div class="layui-form-item">
        <button class="pear-btn pear-btn-success login" lay-filter="login" lay-submit>
            登 入
        </button>
    </div>
</form>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['form', 'jquery', 'layer', 'button', 'popup'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let button = layui.button;
        let popup = layui.popup;
        let captchaPath = "/system/captcha/generate";

        form.on('submit(login)', function (data) {
            let loader = layer.load();
            let btn = button.load({elem: '.login'});
            $.ajax({
                url: '/login',
                data: data.field,
                type: "post",
                dataType: 'json',
                success: function (result) {
                    layer.close(loader);
                    btn.stop(function () {
                        if (result.success) {
                            popup.success(result.msg, function () {
                                location.href = "/index";
                            })
                        } else {
                            popup.failure(result.msg, function () {
                                document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
                            });
                        }
                    })
                }
            });
            return false;
        });

        $("#captchaImage").click(function () {
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        })
        setInterval(function () {
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        }, 30 * 1000);
        validateKickout();
    })
</script>
<script>
    if (window != top) {
        top.location.href = location.href;
    }

    function validateKickout() {
        if (getParam("abnormalout") == 1) {
            layer.alert("<font color='red'>您已在别处登录，请您修改密码或重新登录</font>", {
                    icon: 0,
                    title: "系统提示"
                },
                function (index) {
                    layer.close(index);
                });
        } else if (getParam("sessionout") == 1) {
            layer.alert("<font color='red'>登录已过期，请重新登录</font>", {
                    icon: 0,
                    title: "系统提示"
                },
                function (index) {
                    layer.close(index);
                });
        }
    }

    function getParam(paramName) {
        var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    }
</script>
</body>
</html>